<template>
  <component ref="form" :readonly="readonly" :is="showComponents" :mode="mode" v-model="_value" v-bind="config.props" />
</template>
<script setup>
import { computed, getCurrentInstance } from "vue";
// TODO:组件自动注册
import TextInput from "./funcComponents/TextInput.vue";
import NumberInput from "./funcComponents/NumberInput.vue";
import TextareaInput from "./funcComponents/TextareaInput.vue";
import SelectInput from "./funcComponents/SelectInput.vue";
import MultipleSelect from "./funcComponents/MultipleSelect.vue";
import DateTime from "./funcComponents/DateTime.vue";
import DateTimeRange from "./funcComponents/DateTimeRange.vue";
import TimePicker from "./funcComponents/TimePicker.vue";
import TimeRangePicker from "./funcComponents/TimeRangePicker.vue";
import ImageUpload from "./funcComponents/ImageUpload.vue";
import FileUpload from "./funcComponents/FileUpload.vue";
import Description from "./funcComponents/Description.vue";
import DeptPicker from "./funcComponents/DeptPicker.vue";
import UserPicker from "./funcComponents/UserPicker.vue";
import CascaderInput from "./funcComponents/CascaderInput.vue";
import EditorInput from "./funcComponents/EditorInput.vue";
import VideoUpload from "./funcComponents/videoUpload.vue";
import HyperlinkInput from "./funcComponents/HyperlinkInput.vue";

const { proxy } = getCurrentInstance();
const props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {};
    }
  },
  mode: {
    type: String,
    default: "DESIGN"
  },
  readonly: {
    type: Boolean,
    default: false
  }
});
const emit = defineEmits(["update:modelValue"]);

const showComponents = computed(() => {
  const cmps = {
    TextInput: TextInput,
    NumberInput: NumberInput,
    TextareaInput: TextareaInput,
    SelectInput: SelectInput,
    MultipleSelect: MultipleSelect,
    DateTime: DateTime,
    DateTimeRange: DateTimeRange,
    TimePicker: TimePicker,
    TimeRangePicker: TimeRangePicker,
    ImageUpload: ImageUpload,
    FileUpload: FileUpload,
    Description: Description,
    DeptPicker: DeptPicker,
    UserPicker: UserPicker,
    Location: Location,
    CascaderInput: CascaderInput,
    EditorInput: EditorInput,
    VideoUpload: VideoUpload,
    HyperlinkInput: HyperlinkInput
  };
  return cmps[props.config.name];
});
const _value = computed({
  get: () => {
    return props.modelValue;
  },
  set: val => {
    emit("update:modelValue", val);
  }
});
// eslint-disable-next-line no-unused-vars
const validate = call => {
  if (proxy.$refs.form.validate) {
    proxy.$refs.form.validate(call);
  } else {
    call(true);
  }
};
</script>

<style lang="scss" scoped></style>
